
<!-- <script src="js/main.js"></script> -->
<meta charset="UTF-8">
<!-- 引入样式 -->
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<link rel="stylesheet" href="./css/element.css">
<link rel="stylesheet" href="./css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="./js/vue.min.js"></script>
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
<script src="./js/element.js"></script>
<!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->
<script src="./js/vue-router.js"></script>

<style>
  /* 去除白边 */
  *{
    margin:0;
    padding:0;
    border:0;
  }
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }

  /* 菜单栏移入移除 */
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

<div id="app">
  <el-container style="height: 100%;">

    <!-- start left menu -->
    <el-aside width="auto">
      <!-- 后期考虑pageheader优化：https://element.eleme.cn/#/zh-CN/component/page-header -->

      <el-menu style="height: 100%;border:0"  default-active="first" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="0" @click="open"> 
          <i :class="iocShow"></i>
          <span>打开</span>
        </el-menu-item>
        
        <el-menu-item  index="first" @click="record"> 
            <i class="el-icon-s-home"></i>
            <span >首页</span>
        </el-menu-item>
          
          <el-submenu index="1">
              <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>vue基础</span>
              </template>
              <a href="./context/install.html" class="a-noline" target="context" >
                <el-menu-item index="1-1">
                    第一节：介绍与安装
                </el-menu-item>
              </a>
              <a href="./context/create.html"  class="a-noline" target="context" >
                <el-menu-item index="1-2">
                    第二节：创建vue
                </el-menu-item>
              </a>
              <a href="./context/model.html"  class="a-noline" target="context" >
                <el-menu-item index="1-3">
                    第三节：实例
                </el-menu-item>
              </a>
              <a href="./context/grammar.html"  class="a-noline" target="context" >
                <el-menu-item index="1-4">
                    第四节：模板语法
                </el-menu-item>
              </a>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-notebook-2"></i>
                <span>开发记录</span>
            </template>
            <a href="./history/style.html" class="a-noline" target="context" >
              <el-menu-item index="2-1">
                  页面配置
              </el-menu-item>
            </a>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
                <i class="el-icon-coffee"></i>
                <span>element-ui模型</span>
            </template>
            
            <el-submenu index="3-1">
              <template slot="title">
                <i class="el-icon-apple"></i>
                <span>基础</span>
              </template>
  
              <a href="./document/basic/icon.html" class="a-noline" target="context" >
                <el-menu-item index="3-1-1">
                  <i class="el-icon-picture-outline"></i>
                  <span>图标</span>
                </el-menu-item>
              </a>
  
              <a href="./document/basic/button.html" class="a-noline" target="context" >
                <el-menu-item index="3-1-2">
                  <i class="el-icon-switch-button"></i>
                  <span>按钮</span>
                </el-menu-item>
              </a>
  
              <a href="./document/basic/link.html" class="a-noline" target="context" >
                <el-menu-item index="3-1-3">
                  <i class="el-icon-link"></i>
                  <span>连接</span>
                </el-menu-item>
              </a>

              <a href="./document/basic/layout.html" class="a-noline" target="context" >
                <el-menu-item index="3-1-4">
                  <i class="el-icon-location-information"></i>
                  <span>基础布局</span>
                </el-menu-item>
              </a>

              <a href="./document/basic/container.html" class="a-noline" target="context" >
                <el-menu-item index="3-1-5">
                  <i class="el-icon-map-location"></i>
                  <span>容器布局</span>
                </el-menu-item>
              </a>

            </el-submenu>


            <el-submenu index="3-2">
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>表单</span>
              </template>

              <a href="./document/form/form.html" class="a-noline" target="context" >
                <el-menu-item index="3-2-1">
                  <i class="el-icon-document"></i>
                  <span>步骤表单</span>
                </el-menu-item>
              </a>

            </el-submenu>

            <el-submenu index="3-3">
              <template slot="title">
                <i class="el-icon-s-data"></i>
                <span>数据</span>
              </template>

              <a href="./document/data/table.html" class="a-noline" target="context" >
                <el-menu-item index="3-3-1">
                  <i class="el-icon-s-grid"></i>
                  <span>表格</span>
                </el-menu-item>
              </a>
            </el-submenu>

          </el-submenu>
          <el-submenu index="model">
            <template slot="title">
                <i class="el-icon-notebook-2"></i>
                <span>模型</span>
            </template>

            <a href="./model/excel-util.html" class="a-noline" target="context" >
              <el-menu-item index="model-1">
                  excle解析
              </el-menu-item>
            </a>

            <a href="./model/http-util.html" class="a-noline" target="context" >
              <el-menu-item index="model-2">
                  接口测试
              </el-menu-item>
            </a>

            <a href="./model/json-util.html" class="a-noline" target="context" >
              <el-menu-item index="model-3">
                  json工具
              </el-menu-item>
            </a>

            <a href="./model/txt-util.html" class="a-noline" target="context" >
              <el-menu-item index="model-4">
                  文本解析
              </el-menu-item>
            </a>
          </el-submenu>
          
      </el-menu>

    </el-aside>
    <!-- end left menu -->

    <!-- start right all -->
    <el-container >
      <!-- start right top -->
      <el-header style="height: 9%;" class="">
        <a @click="open"> 
          <i :class="iocShow"></i>
          <span>打开</span>
        </a>
        vue学习笔记
      </el-header>
      <!-- end right top -->

      <!-- start right context -->
      <el-main style="height: 91%;padding:0" class="">
        <iframe src="./show.html" id="mainContext" name="context"  class="" style="width: 100%;height: 100%;" frameborder="0"></iframe>
      </el-main>
      <!-- end right context -->
    </el-container>
    <!-- end right all -->
  </el-container>

</div>

<script>

var Main = {
    data() {
      return {
        isCollapse: false, //菜单是否打开
        iocShow:"el-icon-s-unfold"
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      open() {
        if(this.isCollapse){
          this.isCollapse=false;
          this.iocShow="el-icon-s-unfold";
        }else{
          this.isCollapse=true;
          this.iocShow="el-icon-s-fold";
        }
      },
      record(){
        document.getElementById('mainContext').src='./show.html'
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

</script>